<template>
    <div >
      <el-drawer
        :visible.sync="drawer"
        size="320px"
        :title="视频列表"
        :before-close="handleClose" >
        <!--抽屉的内容-->
        <div style="margin-left: 40px;">
          <dl v-model="rightlist.chapterList" v-for="zhang in rightlist.chapterList">
            <dt v-if="zhang.sectionList !=''">{{zhang.kname}}</dt>
            <dd v-for="jie in zhang.sectionList"  v-if="!jie.vid" style="line-height: 30px"  @click="getThisUrl(jie.courseVideo.vconnection,jie.courseVideo.vid)">
              <i class="el-icon-video-play"></i>&nbsp;<span v-if="jie.courseVideo.vid == vid" style="color: red;">{{jie.jname}}</span>
                                                      <span v-else>{{jie.jname}}</span>
            </dd>
          </dl>
        </div>
      </el-drawer>


      <div style="float: right;width: 20%;height: 700px;background-color: #333333;color: white;">
        <i class="el-icon-document" style="font-size: 120px"  @click="drawer = true"></i>
      </div>
      <div id="mse" style="float: right;"></div>
      <div style="float: right;height: 700px;background-color: #333333;width: 153.5px"></div>

    </div>
</template>

<script>
  import Player from 'xgplayer'

    export default {
        name: "CoursePlayer",
      data(){
          return{
              Player:null,
            drawer: false,
            kid:1,//课程kid 这个课程kid 不管从哪里进来都必须获取到
            uid:1,//用户uid 这个用户uid 不管从哪里进来都必须获取到
            vid:5,//vid 必须要有
            mycourseid:1,//这个是从我的课程中跳转过来的
             rightlist:[],
            isThisVedio:'isCheck',
            bofangtime:'',
            timevedio:0
          }
      },
      methods:{
        // 设置视频配置(注意：initPlayer应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)
        initPlayer(url,time){
          this.Player = new Player({
            // el、url为必选配置，其它为可选配置
            el: document.querySelector('#mse'),
            url: url,
            playNext: {//代表下一级的视频播放
              urlList: [
                // 'url1'
                // 'url2',
                // 'url3'
              ],
            },
            width: '70%',
            height: '700px',
            volume: 0.7,    // 初始音量
            autoplay: false,  // 自动播放
            playbackRate: [0.5, 0.75, 1, 1.5, 2],   // 当前播放速度
            defaultPlaybackRate: 1,     // 播放默认速度设置为1
            playsinline: true,
            poster:'http://liuqinglei.oss-cn-beijing.aliyuncs.com/aaa/03087bf40ad162d9e01dab5106dfa9ec8b13cd88.jpg',
            //视频起播时间（单位：秒）
            lastPlayTime:time,
            lastPlayTimeHideDelay: 5,
            autoplay:true,
          });
          //this.Player.once('事件名')视频初始化的一次性时间
          this.Player.once('ready',()=>{
            //alert("bbb");
          });

        },
        querryBychouti(){
          this.$axios.post("course-vedio/vedio/course/findallbykid/"+this.kid).then(r=>{
              //alert(JSON.stringify(r.data.obj));
              this.rightlist=r.data.obj[0];
              //alert(JSON.stringify(this.rightlist));
            //下一集播放
            // let arr=[];
            //   this.rightlist.chapterList.forEach(function (item, index) {
            //     //alert(JSON.stringify(item));
            //     if (item.sectionList.length > 0) {
            //       item.sectionList.forEach(function (item1, index) {
            //         if (item1.courseVideo.vid != null && item1.courseVideo.vid != '' ) {
            //           if (item1.courseVideo.vid > this.vid) {
            //             alert(item1.courseVideo.vconnection)
            //           }
            //         }
            //       })
            //     }
            //   })
            //alert(JSON.stringify(this.rightlist.chapterList));
          });
        }
        ,
        getData(url,time) {
           //this.initPlayer(url,time)
          this.initPlayer(url,time)
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        getThisUrl(url,vid){
          //切换视频方法
          this.Player.src=url;
          this.vid=vid;
          this.drawer=false;
          //alert(url);
        },
        //页面关闭或刷新的方法
        beforeunloadFn(e) {
          console.log('刷新或关闭');
          this.timevedio=this.Player.currentTime;
        //然后我可以根据 kid uid  去查询这个在传一个vid
          this.$axios.post("course-vedio/vedio/user-course/addorupdate/"+this.kid+"/"+this.uid+"/"+this.vid+"/"+this.timevedio).then(r=>{})
                // if (r.data.obj != null && r.data.obj !='') {
                //
                // }else {
                //
                // }
          // ...
        }
      },
      mounted(){
          //调用生成组件的方法
          //this.getData();

          //视频生成有两种方式，第一种就是我们从课程详情页去跳转到这个页面，这样的话是没有记忆播放的参数的，
        // 我们需要传过来一个vid 是你当前点击的视频的vid 然后在传过来一个kid当前课程的kid，uid当前用户的uid
        //不管是从那个页面跳过来我都可以用this.$route.query.kid 获取到课程kid  以及 vid 然后根据kid 去查询所有课程下面的章和节在抽屉里展示
        //并且根据你的vid 去对应你当前播放的课时 vid就是你当前播放的视频去视频表里找到对应视频播放，当你点击右边抽屉，你就会切换 展示的
        //视频vid找到它的视频连接 切换播放
        //下一集
        //当我们退出视频视频时候根据 uid 和 kid  去查询它是否有我的课程记录，如果有 那么我就根据当前的视频vid 去把信息 视频进度 修改他上次这个课程的记录
        //如果没有那么我就添加一条记录，然后根据当前vid kid 和uid 去添加
      },
     async created(){
          //在created 或者 mounted 生命周期钩子中绑定事件：
        window.addEventListener('beforeunload', e => this.beforeunloadFn(e));
          //首先去获取到mycourseid
        // this.kid=this.$route.query.kid;
         //this.mycourseid = this.$route.query.mycourseid;
        // alert(this.uid);
        // alert(this.kid);

        //1.先根据传过来的kid去查询当前kid下的所有的章和节 视频vid 和视频连接 (展现的是右边抽屉)
        this.querryBychouti();
        if (this.mycourseid == '' || this.mycourseid == null) {
          //this.uid=sessionStorage.getItem("uid");
          //this.vid=this.$route.query.vid;


          //那么代表是从课程详情页跳转过来的
              //alert("从课程详情页过来的")
          //那么从课程详情页过来的 是没有记忆播放的 时间 那么根据vid 去获取到当前的播放路径 并且和
          this.$axios.post("course-vedio/vedio/course-video/getvedio/"+this.vid).then(r=>{
              //alert(JSON.stringify(r.data.obj));
              let vvv=r.data.obj;
              this.getData(vvv.vconnection,0);
          });
        }else {
          //不为空就是从我的课程跳转过来
          //根据传过来的我的课程去查询当前课程kid和用户uid去找到播放到哪一节的vid
          this.$axios.post("course-vedio/vedio/user-course/findmycourse/"+this.mycourseid).then(r=>{
               // alert(JSON.stringify(r.data.obj));
                this.uid=r.data.obj.userId;
                this.kid=r.data.obj.courseId;
                this.bofangtime=r.data.obj.videoTiem;

                //根据课时id去查询对应的课程id
            this.$axios.post("course-vedio/vedio/section/getvid/"+r.data.obj.coursePeroidId).then(r=>{
              this.vid=r.data.obj;

              //生成视频实例
              this.$axios.post("course-vedio/vedio/course-video/getvedio/"+this.vid).then(r=>{
                //alert(JSON.stringify(r.data.obj));
                let vvv=r.data.obj;
                this.getData(vvv.vconnection,this.bofangtime);
              });


            });
          });



        }

      },
      //在 destroyed 钩子中卸载事件：
      destroyed() {
        window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
      }
    }
</script>

<style scoped>
body{
  background-color:black;
}
.el-drawer__open .el-drawer.rtl {
  -webkit-animation: rtl-drawer-in 0.3s 1ms;
  animation: rtl-drawer-in 0.3s 1ms;
  background-color: #333;
}
  .isCheck{
    color:  red;
  }


</style>
